<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <shiro:hasRole name="teacher">
        <title>教师页面</title>
    </shiro:hasRole>
    <shiro:hasRole name="student">
        <title>学生页面</title>
    </shiro:hasRole>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->


    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../../static/css/vendor/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="../../../static/css/vendor/font-awesome.css">
    <!-- Fontawesome Star -->
    <link rel="stylesheet" href="../../../static/css/vendor/fontawesome-stars.css">
    <!-- Ion Icon -->
    <link rel="stylesheet" href="../../../static/css/vendor/ion-fonts.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="../../../static/css/plugins/slick.css">
    <!-- Animation -->
    <link rel="stylesheet" href="../../../static/css/plugins/animate.css">
    <!-- jQuery Ui -->
    <link rel="stylesheet" href="../../../static/css/plugins/jquery-ui.min.css">
    <!-- Venobox.css -->
    <link rel="stylesheet" href="../../../static/css/plugins/venobox.css">
    <!-- Nice Select -->
    <link rel="stylesheet" href="../../../static/css/plugins/nice-select.css">

    <link rel="stylesheet" href="../../../static/css/layui.css" media="all">

    <link rel="stylesheet" href="../../../static/css/modules/layer/default/layer.css">

    <!-- Vendor & Plugins CSS (Please remove the comment from below vendor.min.css & plugins.min.css for better website load performance and remove css files from the above) -->
    <!--
    <link rel="stylesheet" href="../../../static/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="../../../static/css/plugins/plugins.min.css">
    -->

    <!-- Main Style CSS (Please use minify version for better website load performance) -->
    <link rel="stylesheet" href="../../../static/css/style.css">
    <!--<link rel="stylesheet" href="../../../static/css/style.min.css">-->

    <!-- table样式 -->
    <style>
        .mess_table tr td{
            width: 280px;
        }
        .mess_table_tr{
            font-size: 18px;
            font-weight: 600;
        }
        .mess_table_tr_1 td{
            padding-top: 15px;
        }
    </style>

    <style>
        /* table的样式 */
        .attend_table tr td{
            padding-left: 85px;
        }
        .attend_table{
            margin-left: 100px;
        }
        .attend_table_tr td{
            font-size: 20px;
            color: #fed100;
            font-weight: 600;
        }
        .attend_table1_tr td{
            font-size: 18px;
            padding-top: 20px;
        }
    </style>


    <script type="text/javascript" th:inline="javascript">
        window.onload(function () {
            $.ajax({
                type: "Post",
                dataType:'json',
                url:'',//你的controller地址
                success: function (data) {
                    //清除之前的结果
                    $("#StudentTable").empty();
                    var str = "";
                    var date = new Date();
                    //alert(data[0].name + data[0].userName + data[0].endtime);
                    for(var i=0 ;i<data.length;i++){
                        var caseList = data[i];
                        str = "<tr>" +
                            "<td>" + caseList.name + "</td>" +
                            "<td>" + caseList.userName + "</td>" +
                            "<td>" + formatDate(caseList.endtime) + "</td>" +
                            "<td>" + "<input value='详情' type='button' class='btn btn-primary' data-toggle='modal' data-target='#exampleModal1' style='font-size: 15px;color: black;background-color: #fed100;border: 0;'>"
                            + "</td>"+
                            "</tr>"
                        $("#StudentTable").append(str);
                        str = "";
                    }
                }
            });
        })
    </script>

    <!-- 生成随机数的javascript -->
    <script type="text/javascript">
        function get() {
            var randnum;
            randnum=Math.random();
            while(randnum<0.1){
                randnum=Math.random();
            }
            randnum=Math.floor(Math.random()*9000+1000);
            $("#text-random").val(randnum);
        }
    </script>

    <!-- 建立socket -->
    <script>
        var ws;
        var target = 'ws://localhost:8080/attend';
        window.onload = function () {
            if('WebSocket' in window){
                ws = new WebSocket(target);
            }else if('MozWebSocket' in window){
                ws = new WebSocket(target);
            }
            else{
                alert("你的浏览器不支持websocket");
                return;
            }

            // 接收服务端发送的信息
            ws.onmessage = function (event) {
                alert(event.data);
            }
            
            // 关闭session
            ws.onclose(function (event) {
                alert(event.data());
            })
        }


        <!-- 传送消息 -->
        function OnSend() {
            var msg = "你收到新的通知，请刷新页面后查看";
            ws.send(msg);
        }
    </script>


    <!-- 获取学生信息 -->
    <script>
        function getStudentMess(id) {
            $.ajax({
                url: '/attendance/selectStudentMess',
                type: 'post',
                dataType: 'json',
                data: {
                    'studentid': id
                },
                success: function (data) {
                    var da = data;
                    var str = "";
                    var str1 = "";
                    // 清空数据
                    $("#studentstate").empty();
                    $("#studentstate1").empty();
                    var state = da[0].state == 0?'未签':'已签';
                    var state1 = da[0].typ;
                    if(state1 == 0){
                        state1 = '旷课';
                    }else if(state1 == 1){
                        state1 = '迟到'
                    }else if(state1 == 2){
                        state1 = '病假'
                    }else{
                        state1 = '正常'
                    }
                    $("#studentname").text(da[0].userName);
                    $("#studentMessNo").text(da[0].studentNo);
                    str = "<option value='noComplete' selected='selected'>"+ state + "</option>" +
                        "<option value='nomyself'>" + "代签" + "</option>";
                    $("#studentstate").append(str);
                    str1 = "<option selected='selected'>" + state1 + "</option>"+
                        "<option value='nocome'>" + "旷课" + "</option>"+
                        "<option value='ill'>" + "病假" + "</option>"+
                        "<option value='play'>" + "迟到" + "</option>";
                    $("#studentstate1").append(str1);
                }
            })
        }
    </script>

    <!-- 更改学生信息 -->
    <script>
        function updateStudent() {
            var studentstate = $("#studentstate").val();
            var studentstate1 = $("#studentstate1").val();
            if(studentstate=='nomyself'){
                studentstate = 2;
            }
            if(studentstate1=='nocome'){
                studentstate1 = 0;
            }else if(studentstate1=='play'){
                studentstate1 = 1;
            }else{
                studentstate1 = 2;
            }
            $.ajax({
                url:'/attendance/updateStudent',
                type:'post',
                dataType:'json',
                data:{
                    state:studentstate,
                    typ:studentstate1
                },
                success : function (data) {
                    alert(data);
                }
            })
            parent.location.reload();
        }
    </script>

    <!-- 传入学生输入的签到码 -->
    <script>
        function attend_code() {
            var code = $("#attendcode").val();
            $.ajax({
                url:'/attendance/attendIn',
                type:'post',
                dataType:'json',
                data:{
                    'code':code
                },
                success : function (data) {
                    if(data == 0){
                        alert("你输入的签到码有错误");
                    }else {
                        alert("签到成功");
                        // 刷新页面
                        parent.location.reload();
                    }
                }
            })
        }
    </script>
</head>
<!-- 学生考勤的模态框 -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel1">详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="empAddModal_form2" method="post">
                    <span>签到码:</span><input id="attendcode" name="code" style="height: 26px;margin-left: 20px" type="text" placeholder="请输入签到码"/>
                    <div class="form-group">
                        <input style="margin-left: 69%" type="button" class="btn btn-secondary" data-dismiss="modal" value="关闭">
                        <input id="attendButton" onclick="attend_code()" type="button" class="btn btn-primary" value="签到">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 新建考勤的弹窗 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新建考勤</h5>
                <button onclick="get()" type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="empAddModal_form" method="post" action="/attendance/insertOne">
                    <div class="form-group">
                        <!-- 生成随机数，签到数字 -->
                        <div>
                            <span style="margin-left: 58px;font-weight:bold;">签到码：</span>
                            <input name="code" onclick="get()" readonly="readonly" id="text-random" style="font-size: 5em;margin-left: 4%;border: 2px solid black;padding: 3px;width: 50%;cursor:pointer;"/>
                            <p style="margin-top: 20px;color: red;float: right;line-height: 0px;margin-right: 10px">点击签到码进行刷新</p>
                        </div>
                        <!-- 年月日下拉框 -->
                        <div class="form-group" style="margin-left: 57px;margin-top: 36px">
                            <label for="example-datetime-local-input" class="col-form-label">开始时间:</label>
                            <div class="col-lg-12">
                                <input value="2019-08-25T20:30" name="starttime" style="width: 85%" class="form-control" type="datetime-local" id="example-datetime-local-input">
                            </div>
                        </div>
                        <div class="form-group" style="margin-left: 57px;margin-top: 20px">
                            <label for="example-datetime-local-input1" class="col-form-label">截止时间:</label>
                            <div class="col-lg-12">
                                <input value="2019-08-25T20:30" name="endtime" style="width: 85%" class="form-control" type="datetime-local" id="example-datetime-local-input1">
                            </div>
                        </div>
                        <input style="margin-left: 69%" type="button" class="btn btn-secondary" data-dismiss="modal" value="关闭">
                        <input onclick="OnSend()" type="submit" class="btn btn-primary" value="新建">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 详情菜单 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">更改学生考勤信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            <div class="modal-body">
                <form class="form-horizontal" id="empAddModal_form1">
                    <div class="form-group">
                        <!-- 根据id从数据库取得姓名，班级，学号 -->
                        <form class="form-group-form" method="post">
                            <table style="margin-top: 20px;margin-left: 30%;border-collapse: separate;border-spacing: 0px 20px">
                                <tr>
                                    <td>姓名：</td>
                                    <td style="padding-left: 50px" id="studentname"></td>
                                </tr>
                                <tr>
                                    <td>学号：</td>
                                    <td style="padding-left: 50px" id="studentMessNo"></td>
                                </tr>
                                <tr>
                                    <td>考勤状态：</td>
                                    <td style="padding-left: 50px">
                                        <select id="studentstate" name="state_name">

                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>考勤类型：</td>
                                    <td style="padding-left: 50px">
                                        <select name="select_name1" id="studentstate1">

                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <div style="margin-top: 20px">
                                <button style="margin-left: 69%" type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button onclick="updateStudent()" type="button" class="btn btn-primary">更改</button>
                            </div>
                        </form>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<body class="template-color-1">

    <div class="main-wrapper">

        <!-- Begin Loading Area -->
        <div class="loading">
            <div class="text-center middle">
                <span class="loader">
            <span class="loader-inner"></span>
                </span>
            </div>
        </div>
        <!-- Loading Area End Here -->

        <!-- Begin Umino's Header Main Area -->
        <header class="header-main_area">
            <div class="header-top_area">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-5 col-lg-5">
                            <div class="ht-left_area">
                                <div class="header-shipping_area">
                                   <span>It is teaching<strong>System</strong></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-7 col-lg-7">
                            <div class="ht-right_area">
                                <div class="ht-menu">
                                    <ul>
                                       <li><a href="#"></a></li>
                                        <li><a href=""></a></li>
                                        <li><a href="#"><i class="ion-person"></i>个人中心</a></li>
                                        <li><a href="#"><i class="ion-log-out"></i>退出用户</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-middle_area">
                <div class="container">
                   <div class="row">
                        <div class="col-xl-3 col-lg-2">
                            <div class="header-logo">
                                <a href="../index.html">
                                    <img src="../../../static/images/menu/logo/1.png" alt="Umino's Header Logo">
                                </a>
                            </div>
                        </div>
                         <div class="col-lg-2 d-none d-lg-block">
                            <div class="hm-form_area">
                                <form action="#" class="hm-searchbox">
                                    <!-- <input type="text" placeholder="Search product...">
                                    <button class="umino-search_btn" type="submit"><i class="ion-android-search"></i></button> -->
                                </form>
                            </div>
                        </div>
                       <div class="col-lg-5 d-none d-lg-block">
                           <div class="contact-info">
                               <div class="contact-info_icon">
                                   <i class="ion-android-clipboard"></i>
                               </div>
                               <div class="contact-info_content" th:if="${course != null}">
                                   <span th:text="${course.name}">数据结构</span>
                                   <a href="/member/list" th:text="${course.teacherName}" style="cursor:pointer">老师：xxx</a>
                               </div>
                               <div class="contact-info_content" th:if="${course == null}">
                                   <span>错误！！！</span>
                                   <span>暂无此课程</span>
                               </div>
                           </div>
                       </div>
                       
                        <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                            <div class="hm-minicart_area">
                                <ul>
                                    <li>
                                        <a href="cart.html">
                                            <div class="minicart-icon wishlist-icon">
                                                <i class="ion-android-person-add"></i>
                                                <span class="item-count">2</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="cart.html">
                                            <div class="minicart-icon">
                                                <i class="ion-ios-chatbubble"></i>
                                                <span class="item-count">2</span>
                                            </div>
                                            <div class="minicart-title">
                                                <span class="item_total"></span>
                                            </div>
                                        </a>
                                        <ul class="minicart-body">
                                            
                                            <li>
                                                <div class="price_content">
                                                    <div class="cart-subtotals">
                                                        <div class="products subtotal-list">
                                                            <span class="label">Subtotal</span>
                                                            <span class="value">$145.00</span>
                                                        </div>
                                                        <div class="shipping subtotal-list">
                                                            <span class="label">Shipping</span>
                                                            <span class="value">$7.00</span>
                                                        </div>
                                                        <div class="tax subtotal-list">
                                                            <span class="label">Taxes</span>
                                                            <span class="value">$0.00</span>
                                                        </div>
                                                        <div class="cart-total subtotal-list">
                                                            <span class="label">Total</span>
                                                            <span class="value">$152.00</span>
                                                        </div>
                                                    </div>
                                                    <div class="minicart-button">
                                                        <a class="umino-btn umino-btn_fullwidth" href="#">Checkout</a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-bottom_area @@bgColor">
                <div class="container">
                    <div class="row">
                         <div class="col-lg-3 col-md-9 col-sm-7">
                            <div class="category-menu category-menu-hidden">
                                <div class="category-heading">
                                    <h2 class="categories-toggle"><span>菜单</span></h2>
                                </div>
                                <div id="cate-toggle" class="category-menu-list">
                                    <ul>
                                       
                                        <li><a href="/course/list">课堂</a></li>
                                        <shiro:hasRole name="teacher">
                                            <li><a href="">备课区</a></li>
                                        </shiro:hasRole>
                                       
                                         <li class="right-menu"><a href="">教授的课程</a>
                                            <ul class="cat-dropdown_menu">
                                                <li>
                                                    <a href="">数据结构</a>
                                                    <a href="">计算机网络</a>
                                                    <a href="">通信原理</a>
                                                    <a href="">高等数学</a>
                                                    <a href="">线性代数</a>
                                                    
                                                </li>
                                            </ul>
                                        </li>
                                    
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7 d-none d-lg-block position-../../static">
                            <div class="main-menu_area">
                                <nav class="main_nav">
                                    <ul>
										<li><a href="/course/index.html">首页</a></li>
                                        <li><a href="/interact.html">互动</a></li>
                                        <li><a href="/homework/homework.html">作业</a></li>
                                        <li><a href="/courseware.html">资料</a></li>
                                        <li><a href="/testpaper.html">测试</a></li>
                                        <shiro:hasRole name="teacher">
                                            <li class="active"><a href="/attendance/selectAll">考勤</a></li>
                                        </shiro:hasRole>
                                        <shiro:hasRole name="student">
                                            <li class="active"><a href="/attendance/selectCourseAndTea">考勤</a></li>
                                        </shiro:hasRole>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="col-lg-2 d-none d-lg-block">
                            <div class="login-area">
                                <a href="login-register.html"></a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-5 d-block d-lg-none">
                            <div class="mobile-menu_area">
                                <ul>
                                    <li class="minicart-area">
                                        <a href="cart.html"><i class="fa fa-shopping-cart"></i><span class="item-count">2</span></a>
                                    </li>
                                    <li>
                                        <a href="#mobileMenu" class="mobile-menu_btn toolbar-btn color--white d-lg-none d-block">
                                            <i class="ion-navicon"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-bottom_area header-sticky stick">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-2 col-md-6 col-sm-7">
                            <div class="header-logo">
                                <a href="../index.html">
                                    <img src="../../../static/images/menu/logo/1.png" alt="Umino's Header Logo">
                                </a>
                            </div>
                        </div>
                        <div class="col-xl-8 col-lg-7 d-none d-lg-block position-../../static">
                            <div class="main-menu_area">
                                <nav class="main_nav">
                                    <ul>
										<li><a href="/index.html">首页</a></li>
                                        <li><a href="/interact.html">互动</a></li>
                                        <li><a href="homework/homework.html">作业</a></li>
                                        <li><a href="/courseware.html">资料</a></li>
                                        <li><a href="/testpaper.html">测试</a></li>
                                        <shiro:hasRole name="teacher">
                                            <li><a href="/attendance/selectAll">考勤</a></li>
                                        </shiro:hasRole>
                                        <shiro:hasRole name="student">
                                            <li><a href="/attendance/selectCourseAndTea">考勤</a></li>
                                        </shiro:hasRole>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                            <div class="hm-minicart_area">
                                <ul>
                                     <li>
                                        <a href="cart.html">
                                            <div class="minicart-icon wishlist-icon">
                                               <i class="ion-android-person-add"></i>
                                                <span class="item-count">2</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="cart.html">
                                            <div class="minicart-icon">
                                              <i class="ion-ios-chatbubble"></i>
                                                <span class="item-count">2</span>
                                            </div>
                                            <div class="minicart-title">
                                                <span class="item_total">$54.90</span>
                                            </div>
                                        </a>
                                        <ul class="minicart-body">
                                            <li class="minicart-item_area">
                                                <div class="minicart-single_item">
                                                    <div class="product-item_remove">
                                                        <span class="ion-android-close" title="Remove This Item"></span>
                                                    </div>
                                                    <div class="minicart-img">
                                                        <a href="single-product.html">
                                                            <img src="../../../static/images/product/small-size/6.jpg" alt="Umino's Product Image">
                                                        </a>
                                                    </div>
                                                    <div class="minicart-content">
                                                        <div class="product-name">
                                                            <h6>
                                                                <a href="single-product.html">
                                                                    Vulputate justo
                                                                </a>
                                                            </h6>
                                                        </div>
                                                        <span class="product-quantity">Qty 1</span>
                                                        <div class="price-box">
                                                            <span class="new-price">$90.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="minicart-item_area">
                                                <div class="minicart-single_item">
                                                    <div class="product-item_remove">
                                                        <span class="ion-android-close" title="Remove This Item"></span>
                                                    </div>
                                                    <div class="minicart-img">
                                                        <a href="single-product.html">
                                                            <img src="../../../static/images/product/small-size/8.jpg" alt="Umino's Product Image">
                                                        </a>
                                                    </div>
                                                    <div class="minicart-content">
                                                        <div class="product-name">
                                                            <h6>
                                                                <a href="single-product.html">
                                                                    Phasellus vel hendrerit
                                                                </a>
                                                            </h6>
                                                        </div>
                                                        <span class="product-quantity">Qty 1</span>
                                                        <div class="price-box">
                                                            <span class="new-price">$55.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="price_content">
                                                    <div class="cart-subtotals">
                                                        <div class="products subtotal-list">
                                                            <span class="label">Subtotal</span>
                                                            <span class="value">$145.00</span>
                                                        </div>
                                                        <div class="shipping subtotal-list">
                                                            <span class="label">Shipping</span>
                                                            <span class="value">$7.00</span>
                                                        </div>
                                                        <div class="tax subtotal-list">
                                                            <span class="label">Taxes</span>
                                                            <span class="value">$0.00</span>
                                                        </div>
                                                        <div class="cart-total subtotal-list">
                                                            <span class="label">Total</span>
                                                            <span class="value">$152.00</span>
                                                        </div>
                                                    </div>
                                                    <div class="minicart-button">
                                                        <a class="umino-btn umino-btn_fullwidth" href="#">Checkout</a>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-5 d-block d-lg-none">
                            <div class="mobile-menu_area">
                                <ul>
                                    <li class="minicart-area">
                                        <a href="cart.html"><i class="fa fa-shopping-cart"></i><span class="item-count">2</span></a>
                                    </li>
                                    <li>
                                        <a href="#mobileMenu" class="mobile-menu_btn toolbar-btn color--white d-lg-none d-block">
                                            <i class="ion-navicon"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mobile-menu_wrapper" id="mobileMenu">
                <div class="offcanvas-menu-inner">
                    <div class="container">
                        <a href="#" class="btn-close"><i class="ion-android-close"></i></a>
                        <div class="offcanvas-inner_search">
                            <form action="#" class="hm-searchbox">
                                <input type="text" placeholder="Search for item...">
                                <button class="search_btn" type="submit"><i class="ion-ios-search-strong"></i></button>
                            </form>
                        </div>
                        <nav class="offcanvas-navigation">
                            <ul class="mobile-menu">
                                <li class="menu-item-has-children active"><a href="../index.html"><span
                                        class="mm-text">Home</span></a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="../index.html">
                                                <span class="mm-text">Home Shop 1</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="index-2.html">
                                                <span class="mm-text">Home Shop 2</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="index-3.html">
                                                <span class="mm-text">Home Shop 3</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="index-4.html">
                                                <span class="mm-text">Home Shop 4</span>
                                            </a>
                                        </li>
                                        <li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="shop-left-sidebar.html">
                                        <span class="mm-text">Shop</span>
                                    </a>
                                    <ul class="sub-menu">
                                        <li class="menu-item-has-children">
                                            <a href="shop-left-sidebar.html">
                                                <span class="mm-text">Grid View</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="shop-3-column.html">
                                                        <span class="mm-text">Grid Fullwidth</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-left-sidebar.html">
                                                        <span class="mm-text">Left Sidebar</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-right-sidebar.html">
                                                        <span class="mm-text">Right Sidebar</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children">
                                            <a href="shop-list-left-sidebar.html">
                                                <span class="mm-text">Shop List</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="shop-list-fullwidth.html">
                                                        <span class="mm-text">Full Width</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-list-left-sidebar.html">
                                                        <span class="mm-text">Left Sidebar</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="shop-list-right-sidebar.html">
                                                        <span class="mm-text">Right Sidebar</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children">
                                            <a href="single-product-gallery-left.html">
                                                <span class="mm-text">Single Product Style</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="single-product-gallery-left.html">
                                                        <span class="mm-text">Gallery Left</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-gallery-right.html">
                                                        <span class="mm-text">Gallery Right</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-tab-style-left.html">
                                                        <span class="mm-text">Tab Style Left</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-tab-style-right.html">
                                                        <span class="mm-text">Tab Style Right</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-sticky-left.html">
                                                        <span class="mm-text">Sticky Left</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-sticky-right.html">
                                                        <span class="mm-text">Sticky Right</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children">
                                            <a href="single-product.html">
                                                <span class="mm-text">Single Product Type</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="single-product.html">
                                                        <span class="mm-text">Single Product</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-sale.html">
                                                        <span class="mm-text">Single Product Sale</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-group.html">
                                                        <span class="mm-text">Single Product Group</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-variable.html">
                                                        <span class="mm-text">Single Product Variable</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-affiliate.html">
                                                        <span class="mm-text">Single Product Affiliate</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="single-product-slider.html">
                                                        <span class="mm-text">Single Product Slider</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children">
                                            <a href="single-product.html">
                                                <span class="mm-text">Shop Related Pages</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="#">
                                                        <span class="mm-text">My Account</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="login-register.html">
                                                        <span class="mm-text">Login | Register</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="mm-text">Wishlist</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="cart.html">
                                                        <span class="mm-text">Cart</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <span class="mm-text">Checkout</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="compare.html">
                                                        <span class="mm-text">Comparer</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="blog-left-sidebar.html">
                                        <span class="mm-text">Blog</span>
                                    </a>
                                    <ul class="sub-menu">
                                        <li class="menu-item-has-children has-children">
                                            <a href="blog-left-sidebar.html">
                                                <span class="mm-text">Grid View</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="blog-2-column.html">
                                                        <span class="mm-text">Column Two</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-3-column.html">
                                                        <span class="mm-text">Column Three</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-left-sidebar.html">
                                                        <span class="mm-text">Left Sidebar</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-right-sidebar.html">
                                                        <span class="mm-text">Right Sidebar</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children has-children">
                                            <a href="blog-list-left-sidebar.html">
                                                <span class="mm-text">List View</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="blog-list-fullwidth.html">
                                                        <span class="mm-text">List Fullwidth</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-list-left-sidebar.html">
                                                        <span class="mm-text">List Left Sidebar</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-list-right-sidebar.html">
                                                        <span class="mm-text">List Right Sidebar</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children has-children">
                                            <a href="blog-details-left-sidebar.html">
                                                <span class="mm-text">Blog Details</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="blog-details-left-sidebar.html">
                                                        <span class="mm-text">Left Sidebar</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-details-right-sidebar.html">
                                                        <span class="mm-text">Right Sidebar</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="menu-item-has-children has-children">
                                            <a href="blog-gallery-format.html">
                                                <span class="mm-text">Blog Format</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="blog-gallery-format.html">
                                                        <span class="mm-text">Gallery Format</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-audio-format.html">
                                                        <span class="mm-text">Audio Format</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="blog-video-format.html">
                                                        <span class="mm-text">Video Format</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children">
                                    <a href="../index.html">
                                        <span class="mm-text">Pages</span>
                                    </a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="about-us.html">
                                                <span class="mm-text">About Us</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="contact.html">
                                                <span class="mm-text">Contact</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="faq.html">
                                                <span class="mm-text">FAQ</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="404.html">
                                                <span class="mm-text">Error 404</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                        <nav class="offcanvas-navigation user-setting_area">
                            <ul class="mobile-menu">
                                <li class="menu-item-has-children active"><a href="javascript:void(0)"><span
                                        class="mm-text">User
                                        Setting</span></a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="#">
                                                <span class="mm-text">My Account</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="login-register.html">
                                                <span class="mm-text">Login | Register</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="javascript:void(0)"><span
                                        class="mm-text">Currency</span></a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="javascript:void(0)">
                                                <span class="mm-text">EUR €</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <span class="mm-text">USD $</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="javascript:void(0)"><span
                                        class="mm-text">Language</span></a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="javascript:void(0)">
                                                <span class="mm-text">English</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <span class="mm-text">Français</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <span class="mm-text">Romanian</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <span class="mm-text">Japanese</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- Umino's Header Main Area End Here -->

        <!-- Begin Umino's Breadcrumb Area -->
        <div class="breadcrumb-area">
            <div class="container">
                <div class="breadcrumb-content">
                    <ul th:each="courses : ${course}">
                        <li><a href="../index.html">课程名称：<span th:text="${courses.name}"></span></a></li>
                        <shiro:hasRole name="teacher">
                            <li style="margin-left: 35% ">考勤率：<span th:text="${factNumber==0}?0 + '%':(${attenceNum} / ${factNumber} * 100) + '%'"></span></li>
                            <li style="float: right;margin-right: 55px">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="font-size: 15px;color: black;background-color: #fed100;border: 0;">
                                    新建考勤
                                </button>
                            </li>
                        </shiro:hasRole>
                        <shiro:hasRole name="student">
                            <li style="float: right">
                                <form action="/attendance/CheckMessage" method="post">
                                    <input name="NewUserName" style="border-radius: 4px;border: 1px solid #ccc;padding: 3px;" type="text" placeholder="请输入老师的姓名"/>
                                    <input class="btn btn-primary" data-toggle="modal" type="submit" value="查询"/>
                                </form>
                            </li>
                        </shiro:hasRole>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 老师授权 -->
        <shiro:hasRole name="teacher">
            <!-- 签到人数 -->
            <div>
                <ul style="margin-top: 40px;display: flex;flex-direction: row">
                    <li style="border: 4px solid black;padding: 70px; width: 20%;margin-left: 177px">
                        <div style="text-align: center">
                            <span style="font-size: 2.0em;color: red">应到人数</span><br><br><br>
                            <span th:text="${factNumber}" style="font-size: 38px;"></span>
                        </div>
                    </li>
                    <li style="border: 4px solid black;padding: 70px; width: 20%;margin-left: 80px">
                        <div style="text-align: center">
                            <span style="font-size: 2.0em;color: red">实到人数</span><br><br><br>
                            <span style="font-size: 38px;" th:text="${attenceNum}">

                            </span>
                        </div>
                    </li>
                    <li style="border: 4px solid black;padding: 70px; width: 20%;margin-left: 80px">
                        <div style="text-align: center">
                            <span style="font-size: 2.0em;color: red">缺勤人数</span><br><br><br>
                            <span style="font-size: 38px;" th:text="${factNumber} - ${attenceNum}"></span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 学生信息列表 -->
            <table id="table2" class="mess_table" style="display: flex;flex-direction: row;margin-top: 25px;font-size: 18px;margin-left: 90px">
                <tr class="mess_table_tr" style="background-color: #fed100;padding-left: 210px">
                    <td style="display: none">id</td>
                    <td style="padding-left: 85px">学生</td>
                    <td style="padding-left: 87px">考勤状态</td>
                    <td style="padding-left: 160px;">签到时间</td>
                    <td style="padding-left: 177px">备注</td>
                </tr>
                <tr class="mess_table_tr_1" th:each="message : ${message}">
                    <td style="display: none" th:text="${message.id}"></td>
                    <td style="padding-left: 85px" th:text="${message.userName}"></td>
                    <td style="padding-left: 100px" th:text="${message.state == 0?'未签':'已签'}"></td>
                    <td style="padding-left: 100px" th:text="${#dates.format(message.starttime,'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td style="padding-left: 172px">
                        <!-- 通过themyleaf传参数 -->
                        <button th:onclick="'javascript:getStudentMess(\''+${message.id}+'\');'" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2" style="font-size: 15px;color: black;background-color: #fed100;border: 0;">详情</button>
                    </td>
                </tr>
            </table>
            <!-- 分页功能 -->
            <div class="row" style="margin-top: 20px">
                <div class="col-lg-6">
                    <span style="float: right">xxxx页</span>
                </div>
                <div class="col-lg-6">
                    <div class="umino-paginatoin-area">
                        <ul class="umino-pagination-box">
                            <li class="active"><a href="javascript:void(0)">1</a></li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                            <li><a href="javascript:void(0)">5</a></li>
                            <li><a class="Next" href="javascript:void(0)">Next</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </shiro:hasRole>

        <!-- 学生授权 -->
        <shiro:hasRole name="student">
            <div>
                <table class="attend_table" width="100%" style="margin-top: 20px">
                    <tr class="attend_table_tr">
                        <td>课程</td>
                        <td>发起人</td>
                        <td>操作</td>
                    </tr>
                    <tr class="attend_table1_tr" th:each="message : ${message}">
                        <td style="width: 35%" th:text="${message.name}"></td>
                        <td th:text="${message.teacherName}"></td>
                        <td>
                            <input id="attend_table_button" value='详情' type='button' class='btn btn-primary' data-toggle='modal' data-target='#exampleModal1' style='font-size: 15px;color: black;background-color: #fed100;border: 0;'>
                        </td>
                    </tr>
                </table>
                <!-- 分页功能 -->
                <div class="row" style="margin-top: 20px">
                    <div class="col-lg-6">
                        <span style="float: right">第  页</span>
                    </div>
                    <div class="col-lg-6">
                        <div class="umino-paginatoin-area">
                            <ul class="umino-pagination-box">
                                <li class="active"><a href="javascript:void(0)">1</a></li>
                                <li><a href="javascript:void(0)">2</a></li>
                                <li><a href="javascript:void(0)">3</a></li>
                                <li><a href="javascript:void(0)">4</a></li>
                                <li><a href="javascript:void(0)">5</a></li>
                                <li><a class="Next" href="javascript:void(0)">Next</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </shiro:hasRole>
    </div>
    <!-- JS
============================================ -->

    <!-- jQuery JS -->
    <script src="../../../static/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- Modernizer JS -->
    <script src="../../../static/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- Popper JS -->
    <script src="../../../static/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="../../../static/js/vendor/bootstrap.min.js"></script>

    <!-- Slick Slider JS -->
    <script src="../../../static/js/plugins/slick.min.js"></script>
    <!-- Countdown JS -->
    <script src="../../../static/js/plugins/countdown.js"></script>
    <!-- Barrating JS -->
    <script src="../../../static/js/plugins/jquery.barrating.min.js"></script>
    <!-- Counterup JS -->
    <script src="../../../static/js/plugins/jquery.counterup.js"></script>
    <!-- Nice Select JS -->
    <script src="../../../static/js/plugins/jquery.nice-select.js"></script>
    <!-- Sticky Sidebar JS -->
    <script src="../../../static/js/plugins/jquery.sticky-sidebar.js"></script>
    <!-- jQuery UI -->
    <script src="../../../static/js/plugins/jquery-ui.min.js"></script>
    <!-- jQuery UI Touch Punch -->
    <script src="../../../static/js/plugins/jquery.ui.touch-punch.min.js"></script>
    <!-- Venobox JS -->
    <script src="../../../static/js/plugins/venobox.min.js"></script>
    <!-- Scroll Top JS -->
    <script src="../../../static/js/plugins/scroll-top.js"></script>
    <!-- Theia Sticky Sidebar JS -->
    <script src="../../../static/js/plugins/theia-sticky-sidebar.min.js"></script>
    <!-- Waypoints JS -->
    <script src="../../../static/js/plugins/waypoints.min.js"></script>
    <!-- ElevateZoom JS -->
    <script src="../../../static/js/plugins/jquery.elevateZoom-3.0.8.min.js"></script>
    <!-- Images loaded JS -->
    <script src="../../../static/js/plugins/imagesloaded.pkgd.min.js"></script>
    <!-- Isotope JS -->
    <script src="../../../static/js/plugins/isotope.pkgd.min.js"></script>
    <!-- Ajax Mail JS -->
    <script src="../../../static/js/ajax-mail.js"></script>

    <!-- Vendor & Plugins JS (Please remove the comment from below vendor.min.js & plugins.min.js for better website load performance and remove js files from avobe) -->
    <!--
<script src="../../static/js/vendor/vendor.min.js"></script>
<script src="../../static/js/plugins/plugins.min.js"></script>
-->

    <!-- Main JS -->
    <script src="../../../static/js/main.js"></script>

</body>
</html>

